<template>
<div class="form-single-fragment" style="position: relative;">
  <el-form ref="groundEdit" :model="formData" class="full-width-input" :rules="rules" label-width="145px" :size="defaultFormItemSize" label-position="right" @submit.native.prevent>
    <el-row :gutter="20" style="display: flex; flex-wrap: wrap">
      <el-col :span="12">
        <el-form-item label="阵地名称" prop="groundDto.groundName">
          <el-input class="input-item" v-model="formData.groundDto.groundName" :clearable="true" placeholder="阵地名称" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="阵地类型" prop="groundDto.groundType">
          <el-select class="input-item" v-model="formData.groundDto.groundType" :clearable="true" filterable placeholder="阵地类型" @change="typeChange" :disabled="initTypeDisabled">
            <el-option v-for="item in initData.groundTypeOptions" :key="item.id" :value="item.id" :label="item.name" :disabled="item.disabled">
              <el-row type="flex" justify="space-between" align="middle">
                <span>{{item.name}}</span>
                <el-tag v-if="item.disabled" size="mini" type="info" style="margin-left: 20px;">已禁用</el-tag>
              </el-row>
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <!-- 所和基地，选所属中心；站选所属中心和所属所 -->
      <el-col :span="12" v-if="formData.groundDto.groundType && formData.groundDto.groundType!= '4'">
        <el-form-item label="所属中心" prop="groundDto.practiceCenter">
          <el-select v-model="formData.groundDto.practiceCenter" placeholder="所属中心" disabled>
            <el-option v-for="item in initData.centerList" :key="item.groundId" :value="item.groundId" :label="item.groundName">
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12" v-if="formData.groundDto.groundType && formData.groundDto.groundType == '3'">
        <el-form-item label="所属所" prop="groundDto.practicePlace">
          <el-select v-model="formData.groundDto.practicePlace" :clearable="true" placeholder="所属所" filterable>
            <el-option v-for="item in placeList" :key="item.groundId" :value="item.groundId" :label="item.groundName">
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="所属区划" prop="groundDto.area">
          <el-cascader class="input-item" v-model="formData.groundDto.area" :options="getAreaList()" clearable :props="getAreaProps()" :disabled="!formData.groundDto.groundType"></el-cascader>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</div>
</template>

<script>
import rules from '@/utils/validate.js';
import {
  GroundController,
  DictionaryController
} from '@/api';
import projectConfig from '@/core/config';
import {
  treeDataTranslate
} from '@/utils';
export default {
  name: 'groundEdit',
  props: {
    initData: {
      type: Object,
      default: () => {
        return {
          organizationList: [],
          groundTypeOptions: [],
          centerList: [],
        }
      }
    },
    initForm: {
      tyoe: Object,
      default: {}
    },
    headerContent: {
      tyoe: String,
      default: ""
    },
    auth: {
      type: String,
      default: ""
    },
    initTypeDisabled: {
      type: Boolean,
      default: false
    },
  },
  data() {
    return {
      formData: {
        groundDto: {
          groundId: undefined,
          groundName: undefined,
          groundType: undefined,
          openTime: undefined,
          capacity: undefined,
          address: undefined,
          director: undefined,
          directorPublic: undefined,
          directorPhone: undefined,
          directorPhonePublic: undefined,
          contacts: undefined,
          contactsPublic: undefined,
          contactsPhone: undefined,
          contactsPhonePublic: undefined,
          email: undefined,
          tel: undefined,
          intro: undefined,
          photos: undefined,
          coordinate: undefined,
          province: undefined,
          city: undefined,
          district: undefined,
          status: undefined,
          auditStatus: undefined,
          hold1: undefined,
          hold2: undefined,
          hold3: undefined,
          deleted: undefined,
          createUserId: undefined,
          createTime: undefined,
          updateUserId: undefined,
          updateTime: undefined,
          isDatasourceInit: false
        }
      },
      rules: {
        'groundDto.groundName': [{
          required: true,
          message: '请输入阵地名称',
          trigger: 'blur'
        }],
        'groundDto.groundType': [{
          required: true,
          message: '请选择阵地类型',
          trigger: 'change'
        }],
        'groundDto.practiceCenter': [{
          required: true,
          message: '请选择所属中心',
          trigger: 'change'
        }],
        'groundDto.practicePlace': [{
          required: true,
          message: '请选择所属所',
          trigger: 'change'
        }],
        'groundDto.area': [{
          required: true,
          message: '请选择所属区划',
          trigger: 'change'
        }],
      },
      groundEdit: {
        formFilter: {},
        formFilterCopy: {},
        groundType: {},
        contactsPhonePublic: {
          impl: []
        },
        isInit: false
      },
      closeVisible: 0,
      formCreateCourse: {
        pictureUrl: {
          impl: {}
        }
      },
      dialogVisible: false,
      dialogImageUrl: "",
      dialogImages: [],
      initIndex: 0,
      placeList: [],
      detailData: {},
    }
  },
  methods: {
    initFormData() {
      let me = this;
      me.getAreaList();
      me.getAreaProps()
      //编辑状态下当类型为站时查询当前站所属中心下的所属所
      if (me.initForm.practiceCenter && me.initForm.groundType == '3') {
        me.getPlaceList(me.initForm.practiceCenter)
      }
      me.$set(me.formData, "groundDto", me.initForm)
      let arr = [];
      arr.push(me.formData.groundDto.province, me.formData.groundDto.city);
      me.formData.groundDto.district ? arr.push(me.formData.groundDto.district) : ''
      me.formData.groundDto.street ? arr.push(me.formData.groundDto.street) : ''
      me.$set(me.formData.groundDto, "area", arr)
    },
    getPlaceList(orgId) {
      let me = this;
      GroundController.list(this, {
        groundDtoFilter: {
          practiceCenter: orgId,
          groundType: '2'
        },
        orderParam: [{
          fieldName: "createTime",
          asc: 0
        }]
      }).then(res => {
        if (res.data.dataList.length > 0) {
          this.placeList = res.data.dataList
        } else {
          this.placeList = [];
        }
      })
    },
    centerChange() {
      let me = this;
      if (me.formData.groundDto.practiceCenter && me.formData.groundDto.groundType == '3') {
        if (me.formData.groundDto.practicePlace) {
          me.$set(me.formData.groundDto, "practicePlace", "")
        }
        me.getPlaceList(me.formData.groundDto.practiceCenter)
      }
    },
    typeChange() {
      let me = this;
      me.$set(me.formData.groundDto, "practicePlace", "")
      let type = me.formData.groundDto.groundType;
      if (type == '4') { //将类型切换为实践中心时，如若存在所属中心则需要清空
        if (me.formData.groundDto.practiceCenter) {
          me.$set(me.formData.groundDto, "practiceCenter", "")
        }
      }
      if (type == '3' && me.formData.groundDto.practiceCenter) { //将类型切换到实践站时需要查询所属所下拉框数据
        me.getPlaceList(me.formData.groundDto.practiceCenter)
      }
    },
    getAreaList() {
      let me = this;
      return me.initData.areaList;
      // let arr = [];
      // let type = me.formData.groundDto.groundType;
      // if (type == '2' || type == '3') {
      //   arr = JSON.parse(sessionStorage.getItem("areaOptions4"))
      // } else {
      //   arr = JSON.parse(sessionStorage.getItem("areaOptions3"))
      // }
      // return arr
    },
    getAreaProps() {
      let me = this;
      let type = me.formData.groundDto.groundType;
      let obj = {
        value: 'code',
        label: 'name',
        checkStrictly: true
      };
      // obj.checkStrictly = type == '1' ? true : false
      return obj
    },
    dealFormData() {
      let me = this;
      if (me.formData.groundDto.area?.length > 0) {
        let arr = me.formData.groundDto.area;
        me.formData.groundDto.province = arr[0];
        me.formData.groundDto.city = arr[1];
        arr[2] ? me.formData.groundDto.district = arr[2] : '';
        arr[3] ? me.formData.groundDto.street = arr[3] : '';
      }
      return me.formData
    },
    saveData() {
      let me = this;
      let data = {};
      this.$refs.groundEdit.validate((valid) => {
        if (valid) {
          data = me.dealFormData();
        } else {
          data = {}
        }
      })
      return data
    },
  },
  created() {
    this.initFormData()
  }
}
</script>

<style type="less" scoped>
</style>
